<template>
  <div class="box">
    <div class="nav">
      <router-link to="/mine">
        <img src="/static/lyl/BMQD-1.png" alt="">
      </router-link>
      <span>我的足迹</span>
      <div class="right">
        <span @click="quan()">清空</span>
        <span>|</span>
        <span @click="bianhuan2()">编辑</span>
      </div>
    </div>
    <div v-if="bol4" class="d1">
      <p>2017-07-03</p>
      <ul>
        <li v-for="(item,index) in data">
          <div v-if="bol3" @click="bianhuan(index)" :class="{active:item.bol}" class="true">
            <img src="/static/lyl/feblei-20.png" alt="">
          </div>
          <div class="d1left">
            <img :src="item.src" alt="">
          </div>
          <div class="d1right">
            <p>{{item.txt}}</p>
            <p>
              <img src="/static/lyl/ssjg-7.png" alt="">
              <img src="/static/lyl/ssjg-8.png" alt="">
              <span>海外直销</span>
            </p>
            <div class="d1rifot">
              <div class="d1l">
                <span>￥166.06</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div v-if="bol4" class="d1 d2">
      <p>2017-07-09</p>
      <ul>
        <li v-for="(item,index) in data2">
          <div v-if="bol3" @click="bianhuan3(index)" :class="{active:item.bol}" class="true">
            <img src="/static/lyl/feblei-20.png" alt="">
          </div>
          <div class="d1left">
            <img :src="item.src" alt="">
          </div>
          <div class="d1right">
            <p>{{item.txt}}</p>
            <p>
              <img src="/static/lyl/ssjg-7.png" alt="">
              <img src="/static/lyl/ssjg-8.png" alt="">
              <span>海外直销</span>
            </p>
            <div class="d1rifot">
              <div class="d1l">
                <span>￥166.06</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div v-if="bol3" class="d3">
      <div class="d3left">
        <div @click="bianhuan4()" :class="{active:bol2}" class="true">
          <img src="/static/lyl/feblei-20.png" alt="">
        </div>
        <span>全选</span>
      </div>
      <span @click="delquan()">删除</span>
    </div>



  </div>
</template>

<script>
  export default {
    name: "Mfooter",
    data(){
      return {
        bol2:false,
        bol3:false,
        bol4:true,
        data:[
          {src:'/static/lyl/dhw-2.png',txt:'焕彩萃璨花蕊唇彩4.8g',bol:false}
        ],
        data2:[
          {src:'/static/lyl/dhw-2.png',txt:'焕彩萃璨花蕊唇彩4.8g',bol:false},
          {src:'/static/lyl/dhw-2.png',txt:'焕彩萃璨花蕊唇彩4.8g',bol:false},
          {src:'/static/lyl/dhw-2.png',txt:'焕彩萃璨花蕊唇彩4.8g',bol:false}
        ]
      }
    },
    methods:{
      bianhuan(i){
        this.data[i].bol = !this.data[i].bol;
        if (!this.data[i].bol){
          this.bol2 = false;
        }
      },
      bianhuan3(i){
        this.data2[i].bol = !this.data2[i].bol;
        if (!this.data2[i].bol){
          this.bol2 = false;
        }
      },
      bianhuan2(){
        this.bol3 = !this.bol3;
      },
      bianhuan4(){
        this.bol2 = !this.bol2;
        if (this.bol2) {
          for (var i = 0; i < this.data.length; i++) {
            this.data[i].bol = true;
          }
          for (var i = 0; i < this.data2.length; i++) {
            this.data2[i].bol = true;
          }
        }else{
          for (var i = 0; i < this.data.length; i++) {
            this.data[i].bol = false;
          }
          for (var i = 0; i < this.data2.length; i++) {
            this.data2[i].bol = false;
          }
        }
      },
      quan(){
        this.bol4 = false;
      },
      delquan(){
        for (var i = 0; i < this.data.length; i++) {
          if (this.data[i].bol) {
            this.data.splice(i,1);
          }
        }
        for (var i = 0; i < this.data2.length; i++) {
          if (this.data2[i].bol) {
            this.data2.splice(i,1);
          }
        }
      }
    }
  }
</script>

<style scoped>
  .box{
    background: #f2f2f2;
  }
  .d2{
    margin-bottom: 11.5rem;
  }
  .nav{
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    background: #e53e42;
  }
  .nav a img{
    width: 2rem;
  }
  .nav span{
    font-size: 36px;
    line-height: 36px;
    color: #fff;
  }
  .nav .right span{
    font-size: 30px;
    line-height: 36px;
  }
  .true{
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #f2f2f2;
    text-align: center;
    line-height: 3rem;
    align-self: center;
  }
  .active{
    background: #e53e42;
  }
  .d1{
    background: #fff;
  }
  .d1>p{
    padding: 2rem 0 2rem 2rem;
    font-size: 28px;
    line-height: 32px;
    border-bottom: 1px solid #ccc;
  }
  .d1 ul li{
    padding: 2rem;
    display: flex;
  }
  .d1 ul li .d1left{
    width: 17rem;
    text-align: center;
  }
  .d1 ul li .d1left img{
    width: 7rem;
    height: 16rem;
  }
  .d1 ul li .d1right p:nth-child(1){
    font-size: 28px;
    line-height: 32px;
    color: #4c4c4c;
  }
  .d1 ul li .d1right p:nth-child(2){
    display: flex;
    align-items: center;
    margin: 2.5rem 0;
  }
  .d1 ul li .d1right p:nth-child(2) img{
    width: 3.5rem;
    margin-right: 1.5rem;
  }
  .d1 ul li .d1right p:nth-child(2) span{
    font-size: 24px;
    color: #666;
  }
  .d1 ul li .d1right{
    flex-grow: 1;
    padding-left: 2rem;
    border-bottom: 1px solid #ccc;
  }
  .d1 ul li .d1right .d1rifot{
    display: flex;
    justify-content: space-between;
  }
  .d1 ul li .d1right .d1rifot .d1l span{
    font-size: 30px;
    line-height: 36px;
    color: #e53e42;
  }
  .d3{
    background: #fff;
    padding: 3rem 2rem;
    display: flex;
    justify-content: space-between;
  }
  .d3 .d3left{
    display: flex;
  }
  .d3 .d3left span{
    font-size: 30px;
    line-height: 4rem;
    margin-left: 1rem;
    color: #4c4c4c;
  }
  .d3>span{
    width: 12rem;
    height: 4rem;
    border-radius: 2rem;
    background: #e53e42;
    color: #fff;
    line-height: 4rem;
    text-align: center;
    font-size: 28px;
  }
</style>
